<template>
  <div class="home-page">
    <swiper id="swiperBox" :options="swiperOption" ref="mySwiper">
      <swiper-slide class="swiper-slide">
          <banner></banner>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <record></record>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <cooperate></cooperate>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <proxy-app></proxy-app>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <v-footer></v-footer>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import banner from "./banner";
import vFooter from "./footer";
import record from "./record";
import cooperate from "./cooperate";
import proxyApp from "./proxy-app";
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: "home-page",
  data() {
    return {
      swiperOption: {
        notNextTick: true,
        direction: "vertical",
        // grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        slidesPerView: 1,
        mousewheel: true,
        mousewheelControl: true,
        height: window.innerHeight,
        resistanceRatio: 0,
        observeParents: true,
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        //debugger: true,

        // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        on: {
          //监听滑动切换事件，返回swiper对象
          slideChange: () => {
            
          }
        }
      }
    };
  },
  components: { banner, vFooter, record, cooperate, proxyApp,swiper,swiperSlide },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  }
};
</script>

<style lang="scss">
@include b(home-page) {
  // @include e(container) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  // }
}
</style>